<!-- 立即评价 -->
<template>
	<view class="container">
		<view class="order_header">
			<uni-nav-bar left-icon="left" @clickLeft="back" :border="false" :background-color="transparentColor" status-bar dark title="汽车保养" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 主体内容区域 -->
		<view class="order_main">
			<view class="order_main_one">
				<view class="order_main_one_top">
					服务评价
				</view>
				<view class="order_main_one_bottom">
					<view class="order_main_one_bottom_img">
						<img src="/static/车服随便找的一张图片.jpg" />
					</view>
					<view class="order_main_one_bottom_score">
						<view class="order_main_one_bottom_score_text">
							车百事汽车生活馆
						</view>
						<view class="order_main_one_bottom_score_star">
							<uni-rate size="24" :value="0" />
						</view>
					</view>
				</view>
			</view>
			<view class="order_main_two">
				<view class="order_main_two_top">
					评语 <text>(0-299字)</text>
				</view>
				<view class="order_main_two_bottom">
					<view class="order_main_two_bottom_textarea">
						<textarea placeholder="请留下您宝贵的意见和建议......" placeholder-style="font-size: 22rpx"></textarea>
					</view>
				</view>
			</view>
			<view class="order_main_three">
				<view class="order_main_three_top">
					照片 <text>(选填)</text>
				</view>
				<view class="order_main_three_bottom">
					<uni-file-picker></uni-file-picker>
				</view>
			</view>
			<view class="order_main_fore">
				<view class="order_main_fore_button" @click="submit">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
				rateValue: 0
			}
		},
		onLoad() {
			// 模拟动态赋值
			setTimeout(() => {
				this.rateValue = 3
			}, 1000)
		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			back() {
				uni.navigateBack()
			},
			submit() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
}
.order_header {
	height: 400rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}

/* 主体内容区域开始 */
.order_main {
	padding: 0 20rpx;
	position: relative;
	top: -250rpx;
}
.order_main_one,.order_main_two,.order_main_three {
	background-color: #fff;
	padding: 30rpx;
	padding-bottom: 40rpx;
	padding-top: 20rpx;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
}
/* 卡片顶部区域开始 */
.order_main_one_top {
	border-bottom: 8rpx solid #F7F7F7;
}
.order_main_one_top,.order_main_two_top,.order_main_three_top {
	height: 88rpx;
	line-height: 88rpx;
	font-size: 40rpx;
	/* font-weight: bold; */
}
.order_main_two_top>text,.order_main_three_top>text {
	margin-left: 10rpx;
	font-size: 30rpx;
}
/* 卡片顶部区域结束 */
/* 卡片内容区域开始 */
.order_main_one_bottom {
	height: 130rpx;
	padding-top: 30rpx;
	display: flex;
}
.order_main_one_bottom_img {
	width: 200rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}
.order_main_one_bottom_img>img {
	height: 130rpx;
	width: 200rpx;
	border-radius: 10rpx;
}
.order_main_one_bottom_score>view {
	height: 60rpx;
	line-height: 60rpx;
}
.order_main_one_bottom_score_text {
	font-size: 32rpx;
}
.order_main_two_bottom_textarea {
	padding: 30rpx 40rpx;
	border: 2rpx solid #E8E8E8;
	border-radius: 20rpx;
}
.order_main_two_bottom_textarea>textarea {
	height: 230rpx
}
/* 卡片内容区域结束 */
/* 提交按钮区域开始 */
.order_main_fore {
	margin: 50rpx 0;
}
.order_main_fore_button {
	width: 550rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	background-color: #0662E6;
	color: #fff;
	text-align: center;
	margin: auto;
	font-size: 32rpx;
}
/* 提交按钮区域结束 */
/* 主体内容区域结束 */
</style>
